<template>
	<view id="Change">
		<upper-navigation>我的</upper-navigation>
		<view class="basic">
			基础信息:
		</view>
		<!-- <view class="line-st first">
			<view class="title">头像</view>
			<image class="avatar" src="../../static/circle-user.png" mode=""></image>
		</view>
		<view class="under-line"></view> -->
		<view class="line-st first">
			<view class="title">昵称</view>
		</view>
		<view class="under-line"></view>
		<view class="line-st">
			<view class="title">手机号</view>
		</view>
		<view class="under-line"></view>
		<view class="line-st">
			<view class="title">二维码</view>
		</view>
		<view class="under-line"></view>
		<view class="line-st">
			<view class="title">简介</view>
		</view>
		<view class="under-line"></view>
		<view class="btn-l">
			<view class="btn-text">取消</view>
		</view>
		<view class="btn-r">
			<view class="btn-text">保存</view>
		</view>
	</view>
	<bottom-bar></bottom-bar>
</template>

<script>
    // 黄昕焕 @ 2023年5月14日 页面
	//姚珅 @ 5月18日 顶部底部导航组件添加
	import bottomBar from './bottomNavigationBar.vue'
	import upperNavigation from './upperNavigation.vue'
	export default {
		components: {
			bottomBar,
			upperNavigation
		},
	}
</script>

<style lang="less">
	@import url(./shared.less);
	@content-size: 25rpx;
	#Change{
		.title-area {
			text-align: center;
			font-size: 45rpx;
		}
		.line{
		    width: 100%;
		    height: 1rpx;
		    margin-top: 30rpx;
		    background: #d4c4c4;    
		    text-align: center;
		}
		
		.basic{
			margin-left: 50rpx;
			margin-top: 35rpx;
			width: 230rpx;
			height: 40rpx;
			opacity: 1;
			font-size: 40rpx;
			font-weight: 600;
		}
		
		.first{
			margin-top: 60rpx;
		}
		
		.line-st{
			width: 100%;
			height: 120rpx;
			display: flex;

			.title{
				margin-left: 50rpx;
				margin-top: 40rpx;
				font-size: 30rpx;
			}
			
			.avatar{
				width: 95rpx;
				height: 95rpx;
				margin-top: -8rpx;
				margin-left: 490rpx;
			}
		}
		
		.under-line{
			width: 87%;
			height: 1rpx;
			margin: 0 auto;
			background: #d4c4c4;
			position: relative;
			text-align: center;
		}
		
		.btn-l{
			width: 305rpx;
			height: 87rpx;
			background-color: #fff;
			border-radius: 39px;
			background: rgba(235, 243, 248, 1);
			position: absolute;
			top: 900rpx;
			left: 50rpx;
			
			.btn-text{
				font-size: 35rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 39.59rpx;
				text-align: center;
				vertical-align: top;
				padding-top: 22rpx;
			}
		}
		
		.btn-r{
			width: 305rpx;
			height: 87rpx;
			background-color: #fff;
			border-radius: 39px;
			background-color: #707092;
			position: absolute;
			top: 900rpx;
			left: 390rpx;
			
			.btn-text{
				font-size: 35rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 39.59rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				vertical-align: top;
				padding-top: 22rpx;
			}
		}
	}

</style>
